- WikiData Captcha Js
+ let question = null;
+ let questionText = null;
+ let images = null;
+ let htmlContent = null;
+
+ if (this.questionList && this.questionList.questionList.length > 0) {
+ question = this.questionList.questionList[0];
+ questionText = question.questionText;
+
+ const maxImageSize = question.answersAvailable.length < this.IMAGES_PER_CAPTCHA ? question.answersAvailable.length : this.IMAGES_PER_CAPTCHA;
+ images = (question.answersAvailable.slice(0, maxImageSize).map(a =>
+ (
+ ))
+ );
+ }
+
+ if (this.loading) {
+ htmlContent =
;
+ } else {
+ htmlContent = [
+
{questionText}
,
+
+ {images}
+
,
+ ]
+ }
+
+ return (
+ {htmlContent}
);
}
+
+ onImageClick(answer: AnswerDto, event: Event) {
+ if (!answer.userAnswer) {
+ answer.userAnswer = new UserAnswerDto();
+ answer.userAnswer.selected = false;
+ }
+ answer.userAnswer.selected = !answer.userAnswer.selected;
+
+ const imgElem = event.target as HTMLImageElement;
+ if (answer.userAnswer.selected) {
+ imgElem.classList.add('wiki-captcha-img-selected');
+ } else {
+ imgElem.classList.remove('wiki-captcha-img-selected');
+ }
+ console.log('event', imgElem);
+ }
+
+ onSubmitCaptchaAnswers() {
+ fetch(
+ this.WIKI_DATA_URL + '/answers', {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Accept': 'application/json'
+ },
+ body: JSON.stringify(this.questionList)
+ }
+ )
+ .then(() => {
+ this.loading = false;
+ this.fetchQuestions();
+ })
+ .catch(err => {
+ console.log(err);
+ this.loading = false;
+ });
+ }
+
+ fetchQuestions() {
+ this.loading = true;
+ const requestBody = {
+ 'language': 'en'
+ };
+ fetch(
+ this.WIKI_DATA_URL + '/questions', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'Accept': 'application/json'
+ },
+ body: JSON.stringify(requestBody)
+ }
+ )
+ .then(res => res.json())
+ .then(parsedRes => {
+ this.questionList = parsedRes as WikiApiDto;
+ this.loading = false;
+ })
+ .catch(err => {
+ console.log(err);
+ this.loading = false;
+ });
+ }
}
diff --git a/src/index.html b/src/index.html
index fd4c6cb..ad98b37 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,23 +1,39 @@
Stencil Component Starter
diff --git a/src/test/factory.ts b/src/test/factory.ts
new file mode 100644
index 0000000..383c0cf
--- /dev/null
+++ b/src/test/factory.ts
@@ -0,0 +1,36 @@
+import {AnswerDto, QUESTION_TYPES, QuestionDto, WikiApiDto} from '../components/wiki-captcha-js/wiki-api.dto';
+
+export class WikiDataFactory {
+
+ public getQuestions(): WikiApiDto {
+ const questions = new WikiApiDto();
+ questions.sessionId = 'abcd';
+ questions.questionList = [];
+ questions.questionList.push(this.getSingleQuestion());
+ return questions;
+ }
+
+ private getSingleQuestion(): QuestionDto {
+ const question = new QuestionDto();
+ question.questionId = '1';
+ question.questionText = 'Select ALL images with men';
+ question.questionType = QUESTION_TYPES.IMAGE;
+ question.answersAvailable = [];
+ question.answersAvailable.push(this.getAnswer('https://upload.wikimedia.org/wikipedia/commons/f/ff/Human-man.png'));
+ question.answersAvailable.push(this.getAnswer('https://upload.wikimedia.org/wikipedia/commons/5/56/Donald_Trump_official_portrait.jpg'));
+ question.answersAvailable.push(this.getAnswer('https://upload.wikimedia.org/wikipedia/commons/1/12/Billie_Holiday_0001_original.jpg'));
+ question.answersAvailable.push(this.getAnswer('https://upload.wikimedia.org/wikipedia/commons/b/bf/Angela_Merkel._Tallinn_Digital_Summit.jpg'));
+ question.answersAvailable.push(this.getAnswer('https://upload.wikimedia.org/wikipedia/commons/f/ff/Human-man.png'));
+ question.answersAvailable.push(this.getAnswer('https://upload.wikimedia.org/wikipedia/commons/f/ff/Human-man.png'));
+ question.answersAvailable.push(this.getAnswer('https://upload.wikimedia.org/wikipedia/commons/f/ff/Human-man.png'));
+ question.answersAvailable.push(this.getAnswer('https://upload.wikimedia.org/wikipedia/commons/f/ff/Human-man.png'));
+ question.answersAvailable.push(this.getAnswer('https://upload.wikimedia.org/wikipedia/commons/f/ff/Human-man.png'));
+ return question;
+ }
+
+ private getAnswer(img: string): AnswerDto {
+ const answer = new AnswerDto();
+ answer.imgUrl = img;
+ return answer;
+ }
+}
+